<template>
  <view class="shopping-cart">
	  <view style="width: 100%;">
		  <view class="shopItem"
		  v-for="(shop,index) in shopCar"
		  >
		  	<img class="shopItemImg" :src="shop.good.cover">
		  	<view class="shopDetail">
		  		<text > {{shop.good.name }}</text>
		  		<text style="font-size: 36rpx;color: #d30003; font-weight: bold;">￥ {{shop.good.price}}</text>
		  		<a style="float: left;font-size: 32rpx;" @click="goShop(shop.shop.id)"> 进入店铺> </a>
		  		<view style="float:left">
		  			<uni-number-box @change="changeNum($event,index)" :value="shop.count" />
		  		</view>
				
		  		<button class="deleteButton" @click="removeItem(index)">移除</button>
			</view>
		  </view>
	  </view>
	<view class="endTool">
		合计:<text class="endPrice">￥ {{totalPrice}}</text>
		<view class="payTo" @click="goPay()">
			去结算{{shopCar.length>0 ? "("+shopCar.length+")" : "" }}
		</view>
	</view>
  </view>
  </template>
</template>

<script>
import shopcarR from '@/common/api/shopcar/shopcar.js'
import orderR from '@/common/api/order/order.js'
export default {
  data() {
    return {
		shopCar:[],
		totalPrice:0,
	}
  },
  onShow() {
  	this.getCar();
  },
  created() {
	  this.getCar();
  },
  methods: {
	//拉取购物车
	getCar(){
		shopcarR.getShopCar()
			.then(res=>{
				this.shopCar = res.data.list;
				this.totalPrice=0;
				this.getTotalPrice();
			})
	},
	//删除商品
    removeItem(index) {
	  this.shopCar.splice(index, 1);
	  this.update();
	  this.getTotalPrice();
    },
	//计算总价
	getTotalPrice(){
		this.totalPrice=0;
		this.shopCar.forEach(item=>{
			var temp = item.good.price*item.count;
			this.totalPrice+=temp;
		})
	},
	//更改数量
	changeNum(e,index){
		this.shopCar[index].count = e;
		if(this.shopCar[index].count == 0){
			this.shopCar.splice(index,1);
		}
		this.update();
		this.getTotalPrice();
	},
	//更新购物车
	update(){
		var data = new Array();
		this.shopCar.forEach(item=>{
			var temp = '{"count":"'+item.count+'","shopId":"'+item.shop.id+'","goodId":"'+item.good.id+'"}';
			data.push(JSON.parse(temp));
		})
		shopcarR.updateShopCar({'goods':data})
			.then(res=>{
				uni.showToast({
					title:'修改成功',
				})
			})
	},
	//创建订单
	goPay(){
		orderR.createOrder()
			.then(res=>{
				uni.showToast({
					title:'订单创建成功',
				})
			})
	}
  },
};
</script>
<style>
.shopping-cart{
	background-color: #fafafa;
	display:flex;
	
	 align-items: center;/*垂直居中*/
	
	 justify-content: center;/*水平居中*/
	
	 width:100%;
	
	 height:100%;
}
.shopItem{
	padding-left: 10rpx;
	height: 30%;
	width: 100%;
}
.shopItemImg{
	width: 30%;
	height: 300rpx;
}
.shopDetail{
	float: right;
	width:60%;
	height:100%;
}
.shopDetail text{
	padding: 5rpx;
	display: block;
}
.deleteButton{
	margin-top: 100rpx;
	margin-right: 0rpx;
	height: 50rpx;
	width: 120rpx;
	background-color: #d30003;
	color: #ececec;
	text-align: center;
	font-size: 26rpx;
}
.endTool{
	background-color: #fafafa;
	height: 10%;
	bottom: 0rpx;
	width: 100%;
	position: fixed;
}
.endPrice{
	padding-left:10rpx;
	font-size: 46rpx;
	font-weight: bold;
	color: #282828;
}
.payTo{
	float: right;
	width: 30%;
	height: 80rpx;
	background-color: #d30003;
	color: #ececec;
	text-align: center;
	line-height: 80rpx;
	border-radius: 100rpx;
}
</style>
